﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CRUD </title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script> 
    
    
</head>
<body>
    <h1>CRUD</h1>
    <div style="padding-top:5px;padding-bottom:5px;">    
        <span>员工姓名：</span><input type="text" id="key"  />
        <input type="button" value="查找" onclick="search()"/>

        <input type="button" value="Add" onclick="addRow()" style="margin-left:200px;"/>    
        <input type="button" value="Remove" onclick="removeRow()" />   
        <input type="button" value="Save" onclick="saveData()" style="margin-left:100px;"/>  
    
    </div>
    <div id="datagrid1" class="mini-datagrid" style="width:800px;height:280px;" 
        url="../data/AjaxService.jsp?method=SearchEmployees" idField="id"
        allowResize="true" pageSize="20" 
        allowCellEdit="true" allowCellSelect="true" multiSelect="true"
    >
        <div property="columns">
            <div type="checkcolumn"></div>            
<div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号
    <input property="editor" class="mini-textbox" style="width:100%;"/>
</div>                
            <div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别
                <input property="editor" class="mini-combobox" style="width:100%;" data="Genders"/>                
            </div>
            <div field="age" width="100" allowSort="true" >年龄
                <input property="editor" class="mini-spinner" minValue="0" maxValue="200" value="25" style="width:100%;"/>
            </div>
            <div field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期
                <input property="editor" class="mini-datepicker" style="width:100%;"/>
            </div>    
            <div field="remarks" width="120" headerAlign="center" allowSort="true">备注
                <input property="editor" class="mini-textarea" style="width:100%;" minHeight="80"/>
            </div>                                 
            <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>
        </div>
    </div>
    <script type="text/javascript">
        mini.parse();
        
        var grid = mini.get("datagrid1");
        grid.load();
        
        ///////////////////////////////////////////////////////       
        var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}];
        function onGenderRenderer(e) {
            for (var i = 0, l = Genders.length; i < l; i++) {
                var g = Genders[i];
                if (g.id == e.value) return g.text;
            }
            return "";
        }

        //////////////////////////////////////////////////////
function search() {
    var key = document.getElementById("key").value;
    grid.load({ key: key });
}
        $("#key").bind("keyup", function (e) {
            if (e.keyCode == 13) {
                search();
            }
        });
function addRow() {
    var newRow = { name: "New Row" };
    grid.addRow(newRow, 0);
}
function removeRow() {
    var rows = grid.getSelecteds();
    if (rows.length > 0) {
        grid.removeRows(rows, true);
    }
}
function saveData() {
    var data = grid.getChanges();
    var json = mini.encode(data);
    grid.loading("保存中，请稍后......");        
    $.ajax({
        url: "../data/AjaxService.jsp?method=SaveEmployees",
        data: { data: json },
        type: "post",
        success: function (text) {
            grid.reload();
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(jqXHR.responseText);
        }
    });
}
    </script>

    <div class="description">
        <h3>Description</h3>
        
    </div>
</body>
</html>